<template>
  <div class="boxs">
    <!-- 上边内容 -->
    <div class="box1">
      <!-- 面包屑 -->
      <div class="aaa">
        <a-breadcrumb>
          <a-breadcrumb-item>关联收文</a-breadcrumb-item>
          <a-breadcrumb-item>发文</a-breadcrumb-item>
          <a-breadcrumb-item>签报</a-breadcrumb-item>
          <a-breadcrumb-item> <span @click="showModal">会议预算</span> </a-breadcrumb-item>
        </a-breadcrumb>
      </div>

      <!-- 列表 -->
      <div class="bbb">
        <ul>
          <li v-for="(e, index) in list" :key="e.key">{{e.title}}   <button @click="del(index)">删除</button></li>
        </ul>
      </div>
    </div>

    <!-- 对话框 -->
    <div class="box2">
      <a-modal
        width="80%"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <div class="top">
          <h3>相关文件列表</h3>
        </div>
        <div class="center">
          <ul>
            <li v-for="(item, index) in list" :key="item.key">{{item.title}}         <button @click="del(index)">删除</button>
            </li>
          </ul>
        </div>
        <div class="btn">
          <div>
            <a-select default-value="收文1">
              <a-select-option value="收文1"> 收文1 </a-select-option>
              <a-select-option value="收文2"> 收文2 </a-select-option>
              <a-select-option value="收文3"> 收文3 </a-select-option>
            </a-select>
          </div>
          <div>
            <a-input style="width: 170px" />
          </div>
          <div>
            <a-button icon="search"> 查询 </a-button>
          </div>
          <div>
            <a-button type="primary"> 确定 </a-button>
          </div>
        </div>

        <div class="bot">
          <div class="top">
            <h3>请选择相关文件</h3>
          </div>
          <div class="ccc">
            <a-table
              :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelect }"
              :columns="columns"
              :dataSource="data"
            ></a-table>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>

import data from '../../data.json'
const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    width: '40%'
  },
  {
    title: '登记人',
    dataIndex: 'creator'
  },
  {
    title: '登记部门',
    dataIndex: 'department'
  },
  {
    title: '登记时间',
    dataIndex: 'time'
  }
]
export default {
  name: 'Demo-Two',
  data () {
    return {
      data,
      columns,
      visible: false,
      confirmLoading: false,
      selectedRowKeys: [],
      loading: false,
      list: []
    }
  },
  methods: {
    // 显示对话框
    showModal () {
      this.visible = true
    },
    // 取消对话框
    handleCancel () {
      this.visible = false
    },
    start () {
      this.loading = true
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false
        this.selectedRowKeys = []
      }, 1000)
    },
    onSelectChange (selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    onSelect (record, selected) {
      // console.log(record, selected)
      if (selected) {
        this.list.push(record)
      } else {
        this.list.splice(this.list.indexOf(record), 1)
      }
    },
    del (i) {
      // console.log(i)
      this.selectedRowKeys.splice(i, 1)
      this.list.splice(i, 1)
    },
    // ok
    handleOk () {
      this.visible = false
    }
  }
}
</script>

<style scoped lang="less">
.boxs {
  width: 100%;
  // background: pink;
  padding: 0 200px;
}
.box1 {
  padding-top: 15px;
  .ant-breadcrumb {
    font-size: 20px;
    color: blue;
    cursor: pointer;
    span {
      color: blue;
      cursor: pointer;
    }
  }
}
.ant-modal-body {
  .top {
    border: 1px solid #333;
    margin-top: 25px;
    h3 {
      text-align: center;
      background: turquoise;
      color: pink;
      font-weight: 800;
      margin-bottom: 0;
    }
  }
  .center {
    margin-top: 20px;
  }
  .btn {
    display: flex;
    flex-direction: row;
    padding-left: 65%;
    div {
      margin-left: 10px;
      .ant-btn {
        margin-left: 10px;
      }
    }
  }
  .bot {
    .ccc {
      margin-top: 15px;
    }
  }
}
</style>
